<template>
  <div>
    <Bg imgUrl="http://localhost:3000/upload/banner3.jpg" title="Works Example"></Bg>
    <div class="eg-list">
      <div class="eg-list-item">
        <div class="date">
          <span>2021-05</span>
          <strong>12</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/ep1.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>网站抽奖系统数据库设计方案</h1>
          <p>现在很多网站都会有抽奖系统，那么抽奖系统是怎么设计的呢</p>
        </div>
      </div>

      <div class="eg-list-item">
        <div class="date">
          <span>2021-05</span>
          <strong>11</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/ep2.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>学校宿舍管理系统和人事系统的结构设计方案</h1>
          <p>学生宿舍管理系统的结构设计：1.E-R图向关系模型的转换。学生表：学号、姓名、性别、专业班级、联系方式 主码：学号</p>
        </div>
      </div>

      <div class="eg-list-item">
        <div class="date">
          <span>2021-05</span>
          <strong>10</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/ep3.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>解决html5网页中video标签无法播放的方法</h1>
          <p>为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像？</p>
        </div>
      </div>

      <div class="eg-list-item">
        <div class="date">
          <span>2021-05</span>
          <strong>9</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/ep4.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>php建设网站应注意的问题</h1>
          <p>把握整站的结构，避免泄露站点敏感目录，使用预编译语句，避免sql注入，预防XSS代码，如果不需要使用cookie就不使用。</p>
        </div>
      </div>

      <div class="eg-list-item">
        <div class="date">
          <span>2021-05</span>
          <strong>8</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/ep5.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>企业定制网站建设的流程</h1>
          <p>企业定制网站建设的大致流程：业务员与客户进行沟通，包括：网站风格、功能（论坛、留言板、支付、用户登录等）。业务员与美工沟通。制作网页效果图（首页、列表页、内容页）。</p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Bg from '@/components/content/bgContainer/Index';

export default {
  name: 'Index',
  data(){
    return {

    }
  },
  components: {
    Bg
  }
}
</script>

<style scoped lang="less">
  .eg-list{
    width: 80%;
    margin: 0 auto;
    .eg-list-item{
      width: 100%;
      display: flex;
      align-items: center;
      margin: 30px 0;
      .date{
        width: 110px;
        span{
          font-size: 20px;
          display: block;
          font-weight: bold;
          text-indent: 5px;
        }
        strong{
          font-size: 100px;
          display: block;
          font-weight: bold;
          line-height: 100%;
        }
      }
      .pic{
        margin-right: 40px;
        img{
          width: 252px;
        }
      }
      .introduce{
        h1{
          font-weight: normal;
          color: #474747;
          margin-bottom: 20px;
        }
        p{
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }
  }
</style>